﻿@page "/datagrid/frozen-rows"

@using Syncfusion.Blazor.Grids
@using blazor_griddata
@using BlazorDemos
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the Frozen Rows and Columns feature of the DataGrid. Scroll the movable content vertically/horizontally to view the frozen rows/columns with the content.</p>
</SampleDescription>
<ActionDescription>
    <p>DataGrid provides support to freeze certain rows/columns from being scrolled thus allowing only the remaining content scrollable. This can be achieved by using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows'>FrozenRows</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns'>FrozenColumns</a></code> properties.</p>
    <p>In this demo sample,the title section is kept frozen and the remaining content can be scrolled horizontally for comparison at the same time the entire row is kept frozen to compare the content by scrolling vertically.</p>
    <p>More information on the Frozen column feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/scrolling/#frozen-rows-and-columns'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">



            <SfGrid DataSource="@GridData" Height="510" FrozenColumns="1" FrozenRows="2" EnableHover="true"AllowSelection="false" AllowTextWrap="true" AllowSorting="true">
                <GridColumns>
                    <GridColumn Field=@nameof(BugData.Name) HeaderText="Title" TextAlign="TextAlign.Left" Width="200" MaxWidth="300"></GridColumn>
                    <GridColumn Field=@nameof(BugData.Priority) HeaderText="Priority" Width="200" TextAlign="TextAlign.Center">
                        <Template>
                            @{
                                var catagory = (context as BugData);
                                @if (catagory.Priority == "Critical")
                                {
                                    <div class="title-temp1 ">
                                        <span class="font">@catagory.Priority</span>
                                    </div>

                                }
                                @if (catagory.Priority == "High")
                                {
                                    <div class="title-temp2 ">
                                        <span class="font">@catagory.Priority</span>
                                    </div>

                                }
                                @if (catagory.Priority == "Normal")
                                {
                                    <div class="title-temp3">
                                        <span class="font">@catagory.Priority</span>
                                    </div>

                                }
                                @if (catagory.Priority == "Low")
                                {
                                    <div class="title-temp4">
                                        <span class="font">@catagory.Priority</span>
                                    </div>

                                }


                            }
                        </Template>
                    </GridColumn>
                    <GridColumn Field=@nameof(BugData.Status) HeaderText="Status" Width="200" TextAlign="TextAlign.Center">
                        <Template>
                            @{
                                var catagory = (context as BugData);
                                @if (catagory.Status == "In Progress")
                                {
                                    <div class="title-temp5">
                                        <span class="font">@catagory.Status</span>
                                    </div>

                                }
                                @if (catagory.Status == "Completed")
                                {
                                    <div class="title-temp6">
                                        <span class="font">@catagory.Status</span>
                                    </div>

                                }
                                @if (catagory.Status == "Blocked")
                                {
                                    <div class="title-temp7">
                                        <span class="font">@catagory.Status</span>
                                    </div>

                                }
                                @if (catagory.Status == "Won't Fix")
                                {
                                    <div class="title-temp8">
                                        <span class="font">@catagory.Status</span>
                                    </div>

                                }
                                @if (catagory.Status == "Can't Reproduce")
                                {
                                    <div class="title-temp9">
                                        <span class="font">@catagory.Status</span>
                                    </div>

                                }
                                @if (catagory.Status == "By Design")
                                {
                                    <div class="title-temp10">
                                        <span class="font">@catagory.Status</span>
                                    </div>

                                }




                            }
                        </Template>
                    </GridColumn>



                    <GridColumn Field=@nameof(BugData.Description) HeaderText="Description" Width="400"></GridColumn>
                    <GridColumn Field=@nameof(BugData.AssignedTo) HeaderText="Assigned To" Width="200" TextAlign="TextAlign.Center">
                        <Template>
                            @{
                                var catagory = (context as BugData);

                                {
                                    <div class="title-temp11">
                                        <span class="font">@catagory.AssignedTo</span>
                                    </div>

                                }


                            }
                        </Template>

                    </GridColumn>
                    <GridColumn Field=@nameof(BugData.OpenedDays) HeaderText="Created Date" Width="200" Format="d" TextAlign="TextAlign.Right"></GridColumn>
                    
                    <GridColumn Field=@nameof(BugData.BugSource) HeaderText="Bug Source" Width="300" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(BugData.AssociatedFeature) HeaderText="Associated Feature" Width="200" TextAlign="TextAlign.Center">
                        <Template>
                            @{
                                var catagory = (context as BugData);

                                {
                                    <div class="title-temp11">
                                        <span class="font">@catagory.AssociatedFeature</span>
                                    </div>

                                }


                            }
                        </Template>
                    </GridColumn>
                    <GridColumn Field=@nameof(BugData.CreatedBy) HeaderText="Created By" Width="150" TextAlign="TextAlign.Left"></GridColumn>
                    <GridColumn Field=@nameof(BugData.NotificationStatus) HeaderText="Notification Status" Width="200" TextAlign="TextAlign.Center">
                        <Template>
                            @{
                                var catagory = (context as BugData);
                                @if (catagory.NotificationStatus == "Already Notified")
                                {
                                    <div class="title-temp12">
                                        <span class="font">@catagory.NotificationStatus</span>
                                    </div>

                                }
                                @if (catagory.NotificationStatus == "Need to Notify")
                                {
                                    <div class="title-temp13">
                                        <span class="font">@catagory.NotificationStatus</span>
                                    </div>

                                }


                            }
                        </Template>
                    </GridColumn>


                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<BugData> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = BugData.GetAllBugData();
    }
}
@*Hidden:Lines*@
<style type="text/css" class="cssStyles">
    .title-temp1 {
        background: #FFA7B2;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }


    .title-temp2 {
        background: #FFDB94;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp3 {
        background: #89E9DF;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp4 {
        background: #A8E9F7;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp5 {
        background: #FFE87F;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp6 {
        background: #90F0BD;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp7 {
        background: #FFAEB8;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .font {
        color: #000000;
        
    }

    .title-temp8 {
        background: #C2DBF5;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp9 {
        background: #D8D8D8;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp10 {
        background: #EDC3FF;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }


    .title-temp11 {
        background: #DEE4EA;
        border-radius: 34px;
        padding: 16px,8px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp12 {
        background: #90F0BD;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }

    .title-temp13 {
        background: #97EDFE;
        border-radius: 34px;
        padding: 8px 16px;
        text-align: center;
    }
</style>
@*End:Hidden*@

